.components-music{
    position: fixed;
    width: 100%;
    left: 0;
    bottom:0;
    padding:  0 20px ;
    box-sizing: border-box;
    // top:0;
    // height: 60px;
    // height:0;
    // overflow: hidden;
    transition-duration: 1s;
    transform: translateY(120%);
    background: white;
    .audio-play-box{
        margin:10px 0;
        // &>div{
        //     font-size: 40px;
        // }
        .audio-play {
            box-sizing: border-box;
            width: 100%;
            position: absolute;
            top:50%;
            left: 0;
            transform: translateY(-50%);
            .audio-play-icon {
                font-size: 40px!important;
            }
        }
    }
}
.music-svg{
    width: 20px;
    height: 20px;
    border: 1px solid black
}
.components-music-height{
    // height: 60px;
    transform: translateY(0);
}
.audio-play-box-left{
    padding: 10px;
    background: black;
    border-radius: 50%;
    box-sizing: border-box;

}
.audio-play-box-left-bg{ 
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1356241029,464764291&fm=26&gp=0.jpg') no-repeat center;
    background-size: cover;
}
.ratote{
    animation: rotate 6s linear infinite;
}
.stop-animation{
    animation-play-state: paused
}
@keyframes rotate{
	0%{
		transform: rotateZ(0deg);/*从0度开始*/
	}
	100%{
		transform: rotateZ(360deg);/*360度结束*/
	}
}
.audio-play-box-left-box-songtitle{
    // font-size: ;
    width:400px;
    margin-left:20px
}
.component-songList{
    height: 30vh;
    overflow-y:auto;
    position: fixed;
    bottom:0;
    right: 0;
    border-radius: 20px;
    padding: 20px;
    margin: auto;
    box-sizing: border-box;
    // margin: 0 20px;
    left:0;
    width: 95%;
    background: white;
    border:1px solid black;
    z-index: 9999999;
    // display: none;
    transition: all .5s;
    transform: translateY(100%);
}
.component-songList-open{
    transform: translateY(0)!important;
}